<template>
  <div v-loading="loading">
    <div class="row">
      <div class="col-4" v-for="(p, index) of products" :key="index">
        <div
          class="card business-item m-2"
          @click="goToDetail(p.industrial_package_id, p.channel_type)"
        >
          <div class="h4 mb-4">{{ p.load_name }}</div>
          <div>{{ enumModes[p.channel_type] }}</div>
          <!-- <div @click.stop="productDes">产品介绍</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { addressCut } from '@vimi/utils-tool'
export const enumModes = {
  0: '常规28业务',
  1: '便捷28业务',
}
export default {
  data() {
    return {
      enumModes,
      products: [],
      loading: false,
      tableName: 'industrial_package_agency_view',
      order: {
        create_time: 'desc',
      },
      params: {
        index: 1,
        size: 9,
        'gua_type.eq': 4,
        groupFields: 'industrial_package_id',
      },
      totalCount: 0,
    }
  },

  created() {
    this.params['agency_type_sub.eq'] = this.bankType
    this.params.supply_address_code = addressCut(this.queryAddressCode)
    this.getData()
  },
  computed: {
    ...mapGetters(['clientId', 'user']),
    bankType() {
      return this.user.clientOrgClassType
    },
    queryAddressCode() {
      return this.user.queryAddressCode
    },
  },
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          this.products = res?.data?.data ?? []
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    goToDetail(id, model = 0) {
      if (+model === 0) {
        this.$router.push({
          path: `/res_index/index/28/normal`,
          query: {
            id,
            status: 0,
          },
        })
      } else {
        this.$router.push({
          path: `/res_index/index/28/simple`,
          query: {
            id,
            status: 0,
          },
        })
      }
    },
    productDes() {},
  },
}
</script>
<style lang="scss" scoped>
.business-item {
  padding: 35px 0px;
  text-align: center;
  // display: flex;
  &:hover {
    cursor: pointer;
  }
}
</style>
